<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #f{
            width: 300px;
            height: 300px;
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            border: 1px solid black;
            transform-style: preserve-3d;
            perspective:1000px;
        }
        .red{
            transition: 1s;
            transform: rotateX(80deg);
            width: 100px;
            height: 100px;
            background-color: red;

        }




        /*.box{*/
        /*    height: 300px;*/
        /*    width: 700px;*/
        /*    margin: 0 auto;*/
        /*    margin-top: 100px;*/
        /*    border: 2px solid green;*/
        /*    position: relative;*/
        /*    transform-style:preserve-3d;*/
        /*    !*perspective:1000px;*!*/
        /*}*/
        /*.box div{*/
        /*    height: 150px;*/
        /*    width: 150px;*/
        /*    float: left;*/
        /*    margin-right: 30px;*/
        /*    position: relative;*/
        /*}*/
        /*.box01{*/
        /*    background: rgba(7,204,63,0.9);*/
        /*    transition: all 3s;*/

        /*}*/
        /*.box02{*/
        /*    background: rgba(7,204,63,0.6);*/
        /*    transition: all 3s;*/
        /*}*/
        /*.box03{*/
        /*    background: rgba(7,204,63,0.6);*/
        /*    transition: all 3s*/
        /*}*/
        /*.box01:hover{*/
        /*    transform: translateZ(-50px);*/
        /*}*/
        /*.box02:hover{*/
        /*    transform: rotateX(360deg);*/

        /*}*/
        /*.box03:hover{*/
        /*;*/
        /*    transform: rotateY(360deg);*/
        /*}*/
    </style>
</head>
<body>
 <div id="f">
     <div class="red"></div>
 </div>
<!--<div class="box">-->
<!--    <div class="box01">translateZ(-50px)</div>-->
<!--    <div class="box02">rotateX(360deg)</div>-->
<!--    <div class="box03">rotateY(360deg)</div>-->
<!--</div>-->
</body>
</html>